<template>
  <div class="pricing-management">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="material-product-title">
      <span>定价模板管理</span>
      <el-button type="primary" size="small" @click="onGetBack">返回</el-button>
    </div>
    <!-- 搜索栏 -->
    <div class="material-product-search">
      <div class="material-product-search-input">
        <el-input
          placeholder="请输入关键词、名称、编号"
          suffix-icon="el-icon-search"
          v-model="keyword"
        >
        </el-input>
      </div>
      <div class="material-product-search-time">
        <el-date-picker
          v-model="timeData"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="material-product-search-submit">
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="material-product-search-rule">
        <el-button type="primary" @click="isPricingManagementShow = true"
          >新增定价模板</el-button
        >
        <el-button type="warning">批量删除</el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="pricing-management-table">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="date" label="定价模板名称"> </el-table-column>
        <el-table-column prop="name" label="定价平台"> </el-table-column>
        <el-table-column prop="address" label="对应已定价产品数量">
        </el-table-column>
        <el-table-column prop="name" label="创建时间"> </el-table-column>
        <el-table-column prop="name" label="创建人"> </el-table-column>
        <el-table-column prop="name" label="操作" width="150">
          <template slot-scope="">
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="warning" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pricing-management-pagination">
      <el-pagination
        @size-change="pricingManagementSizeChange"
        @current-change="pricingManagementCurrentChange"
        :current-page="page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      title="编辑弹窗"
      :close-on-click-modal="false"
      :visible.sync="isPricingManagementShow"
      width="40%"
    >
      <EditPricingManagement />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isPricingManagementShow = false">取 消</el-button>
        <el-button type="primary" @click="isPricingManagementShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import EditPricingManagement from './edit-pricing-management.vue';

export default {
  name: 'pricingManagement',
  components: { Breadcrumb, EditPricingManagement },
  props: {},
  data() {
    return {
      headerTitle: ['管理设置', '定价模板', '定价模板管理'],
      keyword: '',
      timeData: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
      ],
      page: 1,
      isPricingManagementShow: false, // 新增定价模板
    };
  },
  computed: {
    // 时间快捷选择
    pickerOptions() {
      return this.$store.state.layout.pickerOptions;
    },
  },
  watch: {},
  created() {},
  methods: {
    // 返回上一级
    onGetBack() {
      this.$router.back();
    },
    pricingManagementSizeChange() {},
    pricingManagementCurrentChange() {},
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/collect-material-product.less';
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
.pricing-management {
  .material-product-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
      height: 32px;
    }
  }
  // 数据列表
  .pricing-management-table {
    margin-top: 24px;
  }
  // 分页
  .pricing-management-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }
}
</style>
